<template>
	<view class="content">
		<view class="bg" :style="{'background': 'url('+bg+')','background-size':size}">
			<view class="">
				可提现金额
			</view>
			<view class="" style="font-size: 48rpx;">
				¥{{balance}}
			</view>
		</view>
		<view class="info">
			<view class="box">
				<view class="">
					提现金额
				</view>
				<view class="num">
					<view>
						¥
					</view>
					<view>
						<input type="number" class="uni-input" name="" v-model='money' />
					</view>
					<view style="color: #4CD964;" @tap="withDrawalAll">
						全部提现
					</view>
				</view>
				<!-- <view class="bank">
					
					<view>
						<image style="width: 60rpx;height: 50rpx;margin-right: 12rpx;vertical-align: middle;" src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/wx.png" mode="widthFix"></image>
						微		信
					</view>
					<view>
						<label class="radio" style="margin-right: 30rpx;" @tap="change(1)">
							<radio value="微信" :checked="checked" color="#4CD964"/>
						</label>
					</view>
				</view>
				
				<view class="bank">
					
					<view>
						<image style="width: 60rpx;height: 50rpx;margin-right: 12rpx;vertical-align: middle;" src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/mine/payment.png" mode="widthFix"></image>
						银行卡
					</view>
					<view>
						<label class="radio" style="margin-right: 30rpx;" @tap="change(2)">
							<radio value="银行卡" :checked="!checked" color="#4CD964"/>
						</label>
					</view>
				</view> -->
				
				<view class="bank" v-for="(item,index) in list" :key="index">
					<view>
						{{item.bankname}} 尾号为({{item.bank.substr(-4)}})
					</view>
					<view>
						<label class="radio" style="margin-right: 30rpx;" @tap="changeBank(item.id)">
							<radio value="微信" :checked="item.id==bankId" color="#4CD964"/>
						</label>
					</view>
				</view>
				
				<!-- <view class="bank" v-if="!checked">
					{{cardName}} 尾号为({{card}})
				</view> -->
				<!-- <view class="btn" @tap="withDrawal">
					确认提现
				</view> -->
				<view class="btn" @tap="checkMonthMoney">
					确认提现
				</view>
				<view class="register-link" @tap="goToSignUser">
				  <text class="register-text">还没有签约？前往签约</text>
				</view>
			</view>
			
		</view>
		<view class="selcet-box">
			<view class="select"> 
				<view class="collection-account" @tap="toBankList">
				<!-- <view class="collection-account"> -->
					<image src="../../static/my/skzh.png" mode="widthFix"></image>
					<view class="">
						收款账户
					</view>
				</view>
				<view class="line">
					|
				</view>
				<view class="embodied-rules" @tap="gorule">
					<image src="../../static/my/txgz.png" mode="widthFix"></image>
					<view class="rule">
						提现规则
					</view>
				</view>
			</view>
		</view>
		
		<view class="gorule-log">
			<view class="box">
				<view class="gorule-log-title">
					<view>历史记录</view>
					<view @tap='togorulealllog()'>查看更多</view>
				</view>
				<view class="gorule-log-info" v-for="(item,index) in cardList" :key='index'>
					<view class="gorule-log-info-money" >
						<view>提现到{{item.whereabouts_text}}</view>
						<view>{{item.money}}元</view>
					</view>
					<view class="gorule-log-info-time">
						<view>{{item.create_time_text}}</view>
						<view :style="item.status == 0 ? 'color:#ff0000;' : 'color:#1FD188;'">{{item.status_text}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<Modal
			v-model="show1" 
			title='温馨提示' 
			:text="msg"
			confirm-text='确定'
			noCancel=true
			@confirm='confirm()'
		/>
		<Modal
			v-model="show2" 
			title='温馨提示' 
			:text="msg2"
			confirm-text='确定'
			cancel-text='取消'
			@cancel='cancel2()'
			@confirm='confirm2()'
		/>
		
	</view>
</template>

<script>
	let App = getApp();
	import Modal from '@/components/x-modal/x-modal'
	export default {
		components: {
			Modal
		},
		data() {
			return {
				checked:true,
				money:0,
				balance:0,
				cardList:[],
				lock: false,
				msg:'正在提现请稍等',
				show1:false,
				show2:false,
				cardName:'',
				card:'',
				bg:'http://yunzhidun.oss-cn-beijing.aliyuncs.com/uploads/20210802/d1391641ffa5d6d918c7bc21d59e0119.png',
				size:"100% 100%",
				list:[],
				bankId:0,
				show2:false,
				msg2:'',
			}
		},
		onLoad(option) {
			console.log(option)
			this.balance = option.balance
			this.getimg();
			this.getgorulelog();
			this.getInfo();
		},
		onShow() {
			// this.getimg();
			// this.getgorulelog();
			this.change()
		},
		methods: {
			
			getimg(){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getImg')({
					'sys':App.globalData.sys,
					'index':6
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.bg =  res.data
					}
				
				})
			},
			// change(num){
			// 	if(num == 1){
			// 		this.checked = true
			// 	}else if(num == 2){
					
			// 		this.checked = false
					
			// 		let userinfo = uni.getStorageSync('userinfo');
					
			// 		this.$api.interfaceApi('getBank')({
			// 			'user_id':userinfo.id
			// 		}).then(res=>{
			// 			if(res.code == 200){
			// 				this.cardName =  res.data[0].bankname
			// 				this.card =  res.data[0].bank.substring(res.data[0].bank.length-4)
			// 			}
					
			// 		})
			// 	}
			// },
			change(num){
				let userinfo = uni.getStorageSync('userinfo');
					
				this.$api.interfaceApi('getBank')({
					'user_id':userinfo.id
				}).then(res=>{
					if(res.code == 200){
						this.list = res.data
					}
				
				})
				
			},
			changeBank(id){
				this.bankId = id
				console.log("bankid:"+this.bankId)
			},
			
			getgorulelog(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:'加载中..'
				})
				this.$api.interfaceApi('getgorulelog')({
					'user_id':userinfo.id
				}).then(res=>{
					if(res.code == 200){
						this.cardList = res.data
						console.log(this.cardList)
					}
					uni.hideLoading();
				})
			},
			getInfo(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getInfo')({
					'user_id':userinfo.id
				}).then(res=>{
					if(res.code == 200){
						this.data = res.data
						this.balance = res.data.balance
						console.log(this.data)
					}
					uni.hideLoading()
				})
			},
			withDrawal(){
				let userinfo = uni.getStorageSync('userinfo')
				if	(this.bankId  < 1){
					uni.showToast({
						title: "请选择收款账号",
						icon: "error"
					})
					
					return
				}
				// if(this.checked){
				// 	if(!this.lock){
				// 		this.lock = true
				// 		this.show1 = true
				// 		this.$api.interfaceApi('withDrawal')({
				// 			id:userinfo.id,
				// 			money:this.money,
				// 			admind_id:App.globalData.sys
				// 		}).then(res=>{
				// 			console.log(res.msg)
				// 			this.lock = false
				// 			this.msg = res.msg
				// 		})
				// 	}
					
				// }else{
				// 	if(!this.lock){
				// 		this.lock = true
				// 		this.show1 = true
				// 		this.$api.interfaceApi('withDrawalBank')({
				// 			id:userinfo.id,
				// 			money:this.money,
				// 			"admind_id":App.globalData.sys
				// 		}).then(res=>{
				// 			this.lock = false
				// 			this.msg = res.msg
				// 		})
				// 	}
					
				// }
				if(!this.lock){
					this.lock = true
					this.show1 = true
					// this.$api.interfaceApi('getmoney')({
					// 	'uid':userinfo.id,
					// 	'pay':this.money,
					// 	"sys":App.globalData.sys,
					// 	'bank_id':this.bankId
					// }).then(res=>{
					// 	this.lock = false
					// 	this.msg = res.msg
					// })
					this.$api.interfaceApi('newPayouts')({
						'uid':userinfo.id,
						'money':this.money*1,
						"sys":App.globalData.sys,
						'bankId':this.bankId
					}).then(res=>{
						this.lock = false
						this.msg = res.message || res.msg
					})
				}
				
			},
			withDrawalAll(){
				if(this.balance > 5000){
					this.money = 5000
				}else{
					this.money = Math.floor(this.balance)
				}
			},
			confirm(){
				this.msg = '正在提现请稍等'
				uni.switchTab({
					url:'/pages/mine/mine'
				})
			},
			//跳转提现规则
			gorule(){
				uni.navigateTo({
					url:'/pages/mine/rule?admin_id='+App.globalData.sys
				})
			},
			//跳转查看更多
			togorulealllog(){
				uni.navigateTo({
					url:'/pages/mine/goRuleAllLog'
				})
			},
			
			//跳转银行卡
			toBankList(){
				uni.navigateTo({
					url:'/pages/mine/bankList'
				})
			},
			
			goToSignUser(){
				uni.navigateTo({
					url:'/pages/mine/SignUser'
				})
			},
			
			checkMonthMoney(){
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('checkMonthMoney')({
					'uid':userinfo.id,
					'money':this.money*1,
					"sys":App.globalData.sys,
				}).then(res=>{
					console.log(res)
					if(res.code == 1){
						this.withDrawal()
					}else if(res.code == 0){
						this.msg2 = res.msg
						this.show2 = true
					}else{
						this.msg2 =  res.msg
						this.show2 = true
					}
				})
			},
			cancel2(){
				this.show2 = false
			},
			confirm2(){
				this.show2 = false
				this.withDrawal()
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.content{
		.selcet-box{
			padding: 0 50rpx;
			.select{
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 20rpx 60rpx;
				box-sizing: border-box;
				line-height: 52rpx;
				height: 90rpx;
				.dis{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
				}
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
					margin-top: 7rpx;
				}
				.collection-account{
					display: flex;
					justify-content: space-between;
				}
				.embodied-rules{
					display: flex;
					justify-content: space-between;
				}
			}
		}
		
		
		
		
		.bg{
			height: 300rpx;
			padding: 50rpx;
			color: #FFFFFF;
		}
		
		.info{
			padding: 0 50rpx;
			
			.box{
				border-radius: 20rpx;
				margin-top: -170rpx;
				background-color: #FFFFFF;
				padding: 50rpx;
			}
			
			.num{
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				padding-bottom: 3rpx;
				border-bottom: 1rpx solid #999999;
			}
			
			.bank{
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
			.btn{
				background-color: #4CD964;
				color: #FFFFFF;
				text-align: center;
				border-radius: 50rpx;
				padding: 10rpx 0;
				margin-top: 30rpx;
			}
			
			/* 签约链接 */
			.register-link {
			  margin-top: 16rpx;
			  padding: 15rpx;
			  text-align: center;
			  // animation-delay: 1s;
			  // opacity: 0;
			  .register-text {
			    font-size: 28rpx;
			    color: #4a89dc;
			    text-decoration: underline;
			  }
			}
		}
		
		.gorule-log{
			padding: 0 50rpx;
			
			.box{
				border-radius: 20rpx;
				margin-top: 30rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}
			
			.gorule-log-title{
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #999999;
			}
			
			.gorule-log-info{
				margin-top: 20rpx;
				.gorule-log-info-money{
					display: flex;
					justify-content: space-between;
					color:#565656;
				}
				.gorule-log-info-time{
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #999999;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		
		
	}
</style>
